<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .header {
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }
        
        .content {
            width: 100%;
            height: 300px;
            position: relative;
        }
        
        .right {
            position: absolute;
            right: 0;
            width: 400px;
            height: 100%;
            background-color: blue;
        }
        
        .footer {
            width: 100%;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <span>我是头部</span>
            <!-- 加入一个加法计算器 -->
            <dal></dal>
        </div>
        <div class="content">
            <div class="right">
                <span>我是右部</span>
                <!-- 加入一个加法计算器 -->
                <dal></dal>
            </div>
        </div>
        <div class="footer">
            <span>我是底部</span>
            <!-- 加入一个加法计算器 -->
            <dal></dal>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /**
                                                                                                                                                                            已知 练习01.简易加法计算器.html 中已经实现了简单加法计算器, 请将这个加法计算器定义成组件, 并在此页面对应的区域加入这个计算器
                                                                                                                                                                            **/
        Vue.component('dal', {
            data: function() {
                return {
                    num1: 0,
                    num2: 0,
                    result: 0
                }
            },
            template: `
          <div>
                 <input type="text" v-model="num1">
                   +
                  <input type="text" v-model="num2">
                  <button @click="add">=</button>
                  <span>{{result}}</span>
          </div> `,
            methods: {
                add: function() {
                    this.result = parseInt(this.num1) + parseInt(this.num2)
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>